<template>
  <!-- 我的 -->
  <div class="my">
    <div class="header">
      <!-- 未登录 -->
      <div class="nologin" v-if="!token">
        <img src="../../../public/img/OIP-C.jfif" alt="" />
        <p @click="authFun">登录/注册</p>
      </div>
      <!-- 已登录 用户 -->
      <div class="userinfo" v-else>
        <div class="left">
          <img
            src="http://localhost:3000/src/pages/user/components/avatar/avatar.svg"
            alt=""
          />
          <span>lalune</span>
        </div>
        <div class="right">></div>
      </div>
      <!-- 功能 -->
      <div class="option">
        <div @click="skipFun(1)"><span>常用乘客</span><span>></span></div>
        <div @click="skipFun(2)"><span>我的订单</span><span>></span></div>
        <div @click="skipFun(3)"><span>客服中心</span><span>></span></div>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts">
import { useRoute, useRouter } from "vue-router";
import { Dialog } from "vant";
export default {
  setup() {
    const router = useRouter();
    const token = localStorage.getItem("token");
    //跳转登录
    const authFun = () => {
      router.push({
        path: "/login",
      });
    };

    //功能
    const skipFun = (val: Number) => {
      if (localStorage.getItem("token")) {
        if (val == 1) {
          router.push({
            path: "/passenger",
          });
        } else if (val == 2) {
          router.push({
            path: "/order",
          });
        } else {
          router.push({
            path: "/service",
          });
        }
      } else {
        Dialog.confirm({
          message: "你还没有登录，是否前往登录",
        })
          .then(() => {
            router.push({
              path: "/login",
            });
          })
          .catch(() => {});
      }
    };

    return {
      authFun,
      token,
      skipFun,
    };
  },
};
</script>
  
<style lang="scss">
#app {
  width: 100%;
  height: 100%;
  background: #eee;
}
html,
body {
  width: 100%;
  background: #eee;
}
*{
  margin: 0;
  padding: 0;
}
.my {
  width: 100%;
  height: 100%;

  .header {
    height: 8.4rem;
    background: #1ba9ba;
    border-bottom-right-radius: 15.25rem;
    border-bottom-left-radius: 15.25rem;
    padding-top: 5.5rem;
    color: #fff;
    font-weight: 700;
  position: relative;
    .nologin {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: absolute;
      top: 1rem;
      width: 100%;

      img {
        width: 1.08rem;
        height: 1.08rem;
      }

      p {
        font-size: 3.623188vw;
        font-family: MicrosoftYaHei;
        color: #ffffff;
        margin-top: 2vw;
      }
    }

    .userinfo {
      // margin-top: .1rem;
      // padding: 0 6.763285vw;
      width: 100%;
      align-items: center;
      padding-left:.5rem ;
      margin-top:-4rem ;
      display: flex;
      // justify-content: space-between;

      .left {
        display: flex;
        align-items: center;
        flex: 1;
        span {
          margin-left: 0.625rem;
        }
      }
      .right{
        flex: 1;
        text-align: right;
        padding:.5rem ;
      }
    }

    .option {
      position: absolute;
      left: 2.415459vw;
      right: 2.415459vw;
      top: 40vw;
      background-color: #fff;
      width: 95.169082vw;
      height: 44vw;
      padding: 1.5vw 4.830918vw;
      box-sizing: border-box;
      box-shadow: 0px 0.483092vw 11.594203vw 0px rgb(0 0 0 / 10%);
      border-radius: 2.415459vw;

      div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 4.347826vw;
        padding-bottom: 4.347826vw;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);

        span:nth-child(1) {
          font-size: 3.140097vw;
          font-family: MicrosoftYaHei;
          color: #333333;
        }

        span:nth-child(2) {
          color: #ccc;
        }
      }

      div:nth-child(3) {
        border-bottom: none;
      }
    }
  }
}
</style>